<?php 
if (isset($_SESSION['daima'])){
    $code=$_SESSION['daima'];
}else{
    $code=rand(100,999);
    $_SESSION['daima']=$code;
}

?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>上海市中学生市政大赛</title>
<style>
html,body{font-size:16px;background:#f1f1f4;width:100%;font-size:12px;color:#fff;font-family:Microsoft YaHei, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
body, div{position:relative;padding:0px;margin:0px auto;max-width:750px;}
.weui-dialog{position:fixed;z-index:5000;width:80%;max-width:300px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#FFF;text-align:center;border-radius:3px;overflow:hidden}.weui-dialog__hd{padding:1.3em 1.6em .5em}.weui-dialog__title{font-weight:400;font-size:18px}.weui-dialog__bd{padding:0 1.6em .8em;min-height:40px;font-size:15px;line-height:1.3;word-wrap:break-word;word-break:break-all;color:#999}.weui-dialog__bd:first-child{padding:1.2em 20px .1em;color:#353535}.weui-dialog__ft{position:relative;line-height:48px;font-size:18px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-dialog__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #D5D5D6;color:#D5D5D6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-dialog__btn{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3CC51F;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative}.weui-dialog__btn:active{background-color:#EEE}.weui-dialog__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #D5D5D6;color:#D5D5D6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(.5);transform:scaleX(.5)}.weui-dialog__btn:first-child:after{display:none}.weui-dialog__btn_default{color:#353535}.weui-dialog__btn_primary{color:#0BB20C}@media screen and (min-width:1024px){.weui-dialog{width:35%}}.weui-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.6)}
.weui-mask_transparent{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0}
.js_dialog{display:none;}
.weui-toast {position: fixed;z-index: 5000;width: 7.6em;min-height: 7.6em;top: 180px;left: 50%;margin-left: -3.8em;background: rgba(17, 17, 17, 0.7);text-align: center;border-radius: 5px;color: #FFFFFF;}
.weui-loading {width: 20px;height: 20px;display: inline-block;vertical-align: middle;
animation: weuiLoading 1s steps(12, end) infinite;background: transparent url() no-repeat;background-size: 100%;}
@-webkit-keyframes weuiLoading {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}
@keyframes weuiLoading {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}
.weui-icon_toast.weui-loading {
    margin: 30px 0 0;
    width: 38px;
    height: 38px;
    vertical-align: baseline;
}
.weui-toast__content {
    margin: 0 0 15px;
}
-webkit-touch-callout:none;
-webkit-user-select:none;
html{-ms-touch-action:none;}
div,img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
*{-webkit-text-size-adjust: none;}
.simg{position:absolute;display:block;}
a{text-decoration:none;}
.txt{position:absolute;text-indent:8px;font-size:12px;z-index:2;border:none;background:transparent;}
.txt::-webkit-input-placeholder {color:#58595b;text-align:left;}
select{position:absolute;display:block;background:transparent;border:0px;text-indent:8px;font-size:12px;-webkit-appearance:none;}
.container{position:relative;width:100%;height:auto;overflow:hidden;}
.p1, .p2{position:absolute;width:100%;height:100%;background:transparent url('<?php echo $cdnjsUrl; ?>/img/1.jpg') no-repeat;background-size:cover;display:none;}
.fade-in{opacity:1;-webkit-transition:opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-o-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;}
.p-bg{top:0px;left:0px;}
.t-bg{position:absolute;display:none;width:100%;height:100%;top:0px;left:0px;background-color:#000;opacity:.8;z-index:9;}
.tip{position:absolute;display:none;width:100%;height:100%;top:0px;left:0px;z-index:99;}
.tipz-t1{position:absolute;width:100%;height:auto;background:transparent url('<?php echo $cdnjsUrl; ?>/img/tip-name.png') no-repeat;background-size:cover;}
.tipz-txt1, .tipz-txt2, .tipz-txt3{position:absolute;text-align:center;width:100%;height:auto;color:#686d71;font-size:12px;}
.tipz-txt2{font-weight:700;}
    
.ltop, .lbotm{position:absolute;width:100%;left:0;display:block;}    
.ltop{top:0;}
.lbotm{bottom:0;}
.p2-box{position:absolute;width:100%;left:0;background:transparent url('<?php echo $cdnjsUrl; ?>/img/p2-1.png') no-repeat;background-size:cover;}  
.p2-jkm, .p2-xck{opacity:0;}
.p2-jkm input, .p2-jkm form, .p2-xck input, .p2-xck form{width:100%;height:100%;}
.p2-box1, .p2-box2{position:absolute;overflow:hidden;}
.p2-box1 img, .p2-box2 img{width:100%;}   
.weui-mask_transparent{background-color: rgb(0,0,0, 0.5);}
</style></head>
<body>
<div class="container">
  <div class="p1 page">
        <img class="p-bg simg" src="<?php echo $cdnjsUrl; ?>/img/p1.png">
        <img class="ltop" src="<?php echo $cdnjsUrl; ?>/img/top.png">
        <img class="lbotm" src="<?php echo $cdnjsUrl; ?>/img/p1-b.png">
        <input id="p1-name" class="txt" name="p1-name" type="text" value="" placeholder="" />
        <input id="p1-hao" class="txt" name="p1-hao" type="text" value="" placeholder="" />
      
        <div class="p1-jr simg"></div>
  </div>
  <div class="p2 page">
    <canvas id="canvas1" width="750" height="1344" style="opacity:0;"></canvas>  
    <img class="ltop" src="<?php echo $cdnjsUrl; ?>/img/user-top.png">
    <img class="lbotm" src="<?php echo $cdnjsUrl; ?>/img/user-btm.png">
    <div class="p2-box">
       <div class="p2-box1">
        <img class="p2-1 simg" src="">
       </div>
       <div class="p2-box2">
        <img class="p2-2 simg" src="">
       </div>
                 
        <div class="p2-jkm simg">
           <form id="form1" method="post" enctype="multipart/form-data">
               <input id="onefile" name="one" type="file" accept="image/*" />
           </form>
        </div>
       <div class="p2-xck simg">
           <form id="form2" method="post" enctype="multipart/form-data">
            <input id="twofile" name="one" type="file" accept="image/*" />
           </form> 
        
       </div>
       <div class="p2-ok simg"></div>    
    </div>  
      
  </div>    
    
    
  <div class="tip">
      <div class="tipz-t1">
          <div class="tipz-close simg"></div>
          <div class="tipz-txt1">您填写的姓名并未查询到参赛信息</div>
          <div class="tipz-txt2">请核实后重新填写</div>
          <div class="tipz-txt3">或者联系主办方：021-60319027 吴老师</div>
      
      </div>
  </div>
  <div class="t-bg"></div>
  
  <div class="js_dialog">
       <div class="weui-mask"></div>
       <div class="weui-dialog">
                <div class="weui-dialog__bd weui-msg"></div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary weui-btn">知道了</a>
                </div>
        </div>
  </div>
  <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">照片上传中中</p>
        </div>
  </div>
  
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/jquery.uploadfile.min.js"></script>
    
<script>
_h=h= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var sWidth = parseInt((window.innerWidth > 0) ? window.innerWidth : screen.width);
if(sWidth>750){sWidth=750;}
var _rate=(sWidth/750);
if(h<_rate*1334){
	h=_rate*1334;
}
var _isUpA=false;
var _isUpB=false;
$(function(){
	$(".p1").show().addClass("fade-in");
	$('.container, .page').width(sWidth).height(h);
	$('.p-bg').width(sWidth).height(_rate*1334);
	$('#p1-name').width(_rate*332).height(_rate*62).css({"top":_rate*680, "left":_rate*184});
    $('#p1-hao').width(_rate*332).height(_rate*62).css({"top":_rate*822, "left":_rate*184});
	$('.p1-jr').width(_rate*280).height(_rate*92).css({"top":_rate*930, "left":_rate*214});
    
    
    
	$('.tipz-t1').width(_rate*640).height(_rate*194).css({"top":_rate*500, "left":0});
	$('.tipz-txt1').css({"top":_rate*54});
	$('.tipz-txt2').css({"top":_rate*92});
	$('.tipz-txt3').css({"top":_rate*132});
	$('.tipz-close').width(_rate*80).height(_rate*60).css({"top":0, "right":_rate*50});
    
    $('.p2-jkm').width(_rate*400).height(_rate*120).css({"top":_rate*440, "left":_rate*160});
    $('.p2-xck').width(_rate*400).height(_rate*120).css({"top":_rate*678, "left":_rate*160});
    
    $('.p2-box1').width(_rate*150).height(_rate*150).css({"top":_rate*310, "left":_rate*300});
    $('.p2-box2').width(_rate*150).height(_rate*150).css({"top":_rate*545, "left":_rate*300});
    
    $('.p2-ok').width(_rate*400).height(_rate*120).css({"top":_rate*870, "left":_rate*160});
   
    
    var _tmpTop=(h-_rate*1017)/2;
    if(_tmpTop<0){_tmpTop=0;}
    $('.p2-box').height(_rate*1017).css({"top":_tmpTop});
    
    
    //$(".p1").hide();
   // $(".p2").show().addClass("fade-in");
    
    $('.p2-ok').click(function(){
        if(false == _isUpA){
            $(".weui-msg").html("请上传健康码");
            $(".js_dialog").show();
            return;  
        }
        if(false == _isUpB){
            $(".weui-msg").html("请上传行程卡");
            $(".js_dialog").show();
            return;  
        }
        window.location.href="?c=p1"
    });
    
   $("#onefile").change(function(){
        var files = this.files;
        var file = files[0];
        var reader = new FileReader();
        $("#loadingToast").show();
        reader.onload = function(e){
            var img=new Image();
            img.onload=function(){
                var _imgWidth=this.width;
                var _imgHeight=this.height;
                      console.log('...........');
                 console.log(_imgWidth);
                if(_imgWidth > 750){
                    _imgHeight=(750/_imgWidth)*_imgHeight;
                    _imgWidth=750;
                }
             
                $("#canvas1").width(_imgWidth).height(_imgHeight);
                 var _canvas=document.getElementById("canvas1");
                _canvas.width=_imgWidth;
                _canvas.height=_imgHeight;
                 var ctx=_canvas.getContext("2d");
                ctx.drawImage(img,0,0,_imgWidth,_imgHeight);
                var _cData=_canvas.toDataURL("image/jpeg");
                $.post("./api/?c=pic", {data:_cData,t:1}, function(data){
			      $("#loadingToast").hide();
                  $(".p2-1").attr("src", _cData);
                  _isUpA=true;
 
                 }, "json");
                console.log(_cData);
            }
            img.src=e.target.result;
        }
        reader.readAsDataURL(file);
      
       
   });
    
   $("#twofile").change(function(){
        var files = this.files;
        var file = files[0];
        var reader = new FileReader();
       $("#loadingToast").show();
        reader.onload = function(e){
            var img=new Image();
            img.onload=function(){
                var _imgWidth=this.width;
                var _imgHeight=this.height;
                if(_imgWidth > 750){
                    _imgWidth=750;
                    _imgHeight=(750/_imgWidth)*_imgHeight;
                }
                console.log(_imgWidth);
                $("#canvas2").width(_imgWidth).height(_imgHeight);
                 var _canvas=document.getElementById("canvas1");
                _canvas.width=_imgWidth;
                _canvas.height=_imgHeight;
                var ctx=_canvas.getContext("2d");
                ctx.drawImage(img,0,0,_imgWidth,_imgHeight);
                var _cData=_canvas.toDataURL("image/jpeg");
                $.post("./api/?c=pic", {data:_cData,t:2}, function(data){
			     if('ok' == data.status){
                     $("#loadingToast").hide();
                     $(".p2-2").attr("src",_cData);
                     _isUpB=true;
		          }
                 }, "json");
                console.log(_cData);
            }
            img.src=e.target.result;
        }
        reader.readAsDataURL(file);
       
         
       
   });
    
      
      
    

	$('.tipz-close').click(function(){
		$(".t-bg, .tip").hide();
	});
	$('.p1-jr').click(function(){
		var _name=$("#p1-name").val();
        var _hao=$("#p1-hao").val();
        if('' == _name){
       		$(".weui-msg").html("请填写学生姓名");
            $(".js_dialog").show();
            return;  
        }
        if('' == _hao){
       		$(".weui-msg").html("请填写收到的准考证号码");
            $(".js_dialog").show();
            return;  
        }
        $.post("./api/?c=user", {name:_name, hao:_hao}, function(data){
			 if('ok' == data.status){
                $(".p1").hide();
                $(".p2").show();
		     }else{
                $(".weui-msg").html("姓名或准考证号不对");
                $(".js_dialog").show();
                return;  
			 }
		}, "json");
	});
	
  if(!('placeholder' in document.createElement('input')) ){   
	    $('input[placeholder],textarea[placeholder]').each(function(){var that = $(this),text= that.attr('placeholder');   
	      if(that.val()===""){that.val(text).addClass('placeholder');}   
	      that.focus(function(){if(that.val()===text){that.val("").removeClass('placeholder');}})   
	      .blur(function(){if(that.val()===""){that.val(text).addClass('placeholder');}})   
	      .closest('form').submit(function(){   
	        if(that.val() === text){that.val('');}});});   
	}
	$(".weui-btn").click(function(){
        $(".js_dialog").hide();
	});
});
</script>
</body>
</html>